<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WeeklyWork</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="app-container">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <div class="sidebar-header">
          <h1>WeeklyWork</h1>
        </div>
        <nav class="sidebar-nav">
          <button class="nav-item active" data-view="month">月视图</button>
          <button class="nav-item" data-view="week">周视图</button>
          <button class="nav-item" data-view="day">日视图</button>
          <button class="nav-item" data-view="todos">Todo项</button>
          <button class="nav-item" data-view="projects">项目</button>
          <button class="nav-item" data-view="tags">标签</button>
        </nav>
      </div>

      <!-- 主内容区 -->
      <div class="main-content">
        <!-- 月视图 -->
        <div class="view active" id="month-view">
          <div class="view-header">
            <h2 class="view-title">月视图</h2>
            <div class="view-controls">
              <button id="prev-month">&lt; 上个月</button>
              <span id="current-month">2024年3月</span>
              <button id="next-month">下个月 &gt;</button>
            </div>
          </div>
          <div class="calendar-grid" id="calendar-grid"></div>
        </div>

        <!-- 周视图 -->
        <div class="view" id="week-view">
          <div class="view-header">
            <h2 class="view-title">周视图</h2>
            <div class="view-controls">
              <button id="prev-week">&lt; 上周</button>
              <span id="current-week">2024年第10周</span>
              <button id="next-week">下周 &gt;</button>
            </div>
          </div>
          <div class="week-grid" id="week-grid"></div>
        </div>

        <!-- 日视图 -->
        <div class="view" id="day-view">
          <div class="view-header">
            <h2 class="view-title">日视图</h2>
            <div class="view-controls">
              <button id="prev-day">&lt; 前一天</button>
              <span id="current-day">2024年3月10日 星期日</span>
              <button id="next-day">后一天 &gt;</button>
            </div>
          </div>
          <div class="day-content">
            <div class="todo-list" id="day-todo-list">
              <!-- Todo 列表将通过 JavaScript 动态生成 -->
            </div>
          </div>
        </div>

        <!-- Todo项视图 -->
        <div class="view" id="todos-view">
          <div class="view-header">
            <h2 class="view-title">Todo项</h2>
            <button id="new-todo">新建Todo</button>
          </div>
          <div class="todos-content">
            <div class="todo-list" id="todos-list">
              <!-- Todo列表将通过JavaScript动态生成 -->
            </div>
          </div>
        </div>

        <!-- 项目视图 -->
        <div class="view" id="projects-view">
          <div class="view-header">
            <h2 class="view-title">项目</h2>
            <button id="new-project">新建项目</button>
          </div>
          <div class="projects-grid" id="projects-grid"></div>
        </div>

        <!-- 标签视图 -->
        <div class="view" id="tags-view">
          <div class="view-header">
            <h2 class="view-title">标签</h2>
          </div>
          <div class="tags-content">
            <div class="todo-list" id="tag-todo-list">
              <!-- Todo 列表将通过 JavaScript 动态生成 -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Todo 编辑模态框 -->
    <div class="modal" id="todo-modal">
      <div class="modal-content">
        <h3>编辑 Todo</h3>
        <form id="todo-form">
          <div class="form-group">
            <label for="todo-title">标题</label>
            <input type="text" id="todo-title" required />
          </div>
          <div class="form-group">
            <label for="todo-importance">重要程度</label>
            <select id="todo-importance">
              <option value="S">S - 最重要</option>
              <option value="A">A - 重要</option>
              <option value="B">B - 中等重要</option>
              <option value="C" selected>C - 一般</option>
              <option value="D">D - 不太重要</option>
              <option value="E">E - 不重要</option>
              <option value="F">F - 最不重要</option>
            </select>
          </div>
          <div class="form-group">
            <label for="todo-urgency">紧急程度</label>
            <select id="todo-urgency">
              <option value="S">S - 最紧急</option>
              <option value="A">A - 紧急</option>
              <option value="B">B - 中等紧急</option>
              <option value="C" selected>C - 一般</option>
              <option value="D">D - 不太紧急</option>
              <option value="E">E - 不紧急</option>
              <option value="F">F - 最不紧急</option>
            </select>
          </div>
          <div class="form-group">
            <label for="todo-start-time">开始时间</label>
            <input type="datetime-local" id="todo-start-time" />
          </div>
          <div class="form-group">
            <label for="todo-due-time">截止时间</label>
            <input type="datetime-local" id="todo-due-time" />
          </div>
          <div class="form-group">
            <label for="todo-project">项目</label>
            <select id="todo-project">
              <option value="">无</option>
              <!-- 项目选项将通过 JavaScript 动态生成 -->
            </select>
          </div>
          <div class="form-group">
            <label for="todo-tags">标签</label>
            <input type="text" id="todo-tags" placeholder="用逗号分隔多个标签" />
          </div>
          <div class="form-group">
            <label for="todo-markdown">Markdown 文件路径</label>
            <input type="text" id="todo-markdown" />
          </div>
          <div class="form-actions">
            <button type="button" id="cancel-todo">取消</button>
            <button type="submit">保存</button>
          </div>
        </form>
      </div>
    </div>

    <!-- 项目编辑模态框 -->
    <div class="modal" id="project-modal">
      <div class="modal-content">
        <h3>编辑项目</h3>
        <form id="project-form">
          <div class="form-group">
            <label for="project-name">项目名称</label>
            <input type="text" id="project-name" required />
          </div>
          <div class="form-group">
            <label for="project-markdown">Markdown 文件路径</label>
            <input type="text" id="project-markdown" />
          </div>
          <div class="form-actions">
            <button type="button" id="cancel-project">取消</button>
            <button type="submit">保存</button>
          </div>
        </form>
      </div>
    </div>
    <script type="module" src="main.js"></script>
  </body>
</html>
